<!--
 * @Date: 2021-01-10 11:25:42
 * @information: home
-->
<template>
  <div id="home">
    <h2>列表</h2>
    <base-card v-loading="loading"
               element-loading-text="拼命加载中"
               :dataList="dataList"
               @onDetail="onDetail"></base-card>

    <el-button class="btn_add"
               type="primary"
               icon="el-icon-edit"
               circle
               title="添加数据"
               @click="onAdd"></el-button>

    <el-drawer title="Add"
               size='580px'
               v-model="isShowAddDrawer">
      <add-data v-if="isShowAddDrawer"
                @onSubmit="onSubmit"
                @onCancel="isShowAddDrawer=false"></add-data>
    </el-drawer>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import BaseCard from "@/components/BaseCard.vue";
import AddData from "@/components/AddData.vue";
import homeData from "@/service/homeData";

export default defineComponent({
  components: {
    BaseCard,
    AddData,
  },
  setup(props) {
    let loading = ref(false);

    const {
      dataList,
      isShowAddDrawer,
      onAdd,
      getListData,
      onDetail,
      onSubmit,
    } = homeData({ loading });

    return {
      loading,
      isShowAddDrawer,
      dataList,
      onAdd,
      getListData,
      onDetail,
      onSubmit,
    };
  },
});
</script>

<style lang="scss">
@import "@/style/home.scss";
</style>
